<template>
	<view class="content">
		<view class="advices">
			<view class="advices-title">MUSE Platform Declaration:</view>
			<view class="advices-text">
				Under this platform all users discussions &
				communications between each other must be legal anc follow the rules &requlations.Any illegal case will
				be against by MUSE platform.
			</view>
		</view>
		<view class="message" v-for="item in msgList">
			<view class="message-tt">{{item.am_create_time}}</view>
			<view class="message-list" v-if="item.am_admin_id ==='1'">
				<image :src="item.m_avatar" mode="" class="image"></image>
				<text class="text" v-if="item.am_type==='1'">{{item.am_msg}}</text>
				<image :src="item.am_msg" mode="" class="image" style="border: none;border-radius: 0;" v-else></image>
			</view>
			<view class="message-list2" v-if="item.am_admin_id ==='0'">
				<text class="text" v-if="item.am_type==='1'">{{item.am_msg}}</text>
				<image :src="item.am_msg" mode="" class="image" style="border: none;border-radius: 0;" v-else></image>
				<image class="image" :src="item.m_avatar" mode=""></image>
			</view>
		</view>

		<!-- 底部对话框 -->
		<view class="dialogBox">
			<u-upload :fileList="fileList1" name="1" multiple :maxCount="1" @afterRead="afterRead" deletable width="30"
				height="30">
			</u-upload>
			<!-- <u-upload :custom-btn="true" width="30" height="30" :maxCount="1" @beforeRead="beforeUpload"
				:show-upload-list="false" ref="uUpload" :action='action'>
			</u-upload> -->
			<input type="text" v-model="msg" placeholder="Please enter" />
			<text @click="send">Send</text>
		</view>
	</view>
</template>

<script>
	function timestampFormat(timestamp) {
		function zeroize(num) {
			return (String(num).length == 1 ? '0' : '') + num;
		}

		var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
		var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

		var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
		var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

		var Y = tmDate.getFullYear(),
			m = tmDate.getMonth() + 1,
			d = tmDate.getDate();
		var H = tmDate.getHours(),
			i = tmDate.getMinutes(),
			s = tmDate.getSeconds();

		if (timestampDiff < 60) { // 一分钟以内
			return "刚刚";
		} else if (timestampDiff < 3600) { // 一小时前之内
			return Math.floor(timestampDiff / 60) + "分钟前";
		} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
			return '今天' + zeroize(H) + ':' + zeroize(i);
		} else {
			var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
			if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
				return '昨天' + zeroize(H) + ':' + zeroize(i);
			} else if (curDate.getFullYear() == Y) {
				return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
			} else {
				return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
			}
		}
	}
	export default {
		data() {
			return {
				cut: 1,
				checked: true,
				msgList: [],
				msg: '',
				action: "https://dongya.hualin688.com",
				fileList1: []
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			Getsex(val) {
				this.checked = val
			},
			Switchover(val) {
				this.cut = val
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let app = this
				return new Promise((resolve, reject) => {
					const params = {
						map: 'applet_member_chat',
						type: '2',
						msg: url
					}
					this.$Request({
						method: 'GET',
						data: params
					}).then(res => {
						if (res.data.ec == 200) {
							console.log(res, '上传图片')
							this.fileList1 = []
							this.init()
						} else {

						}
					})
				})
			},
			init() {
				const params = {
					map: 'applet_member_msg_list',
					page: '0'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.msgList = res?.data?.data?.reverse()
						if (this.msgList) {
							this.msgList = this.msgList.map(item => {
								if (item.am_create_time) {
									item.am_create_time = timestampFormat(item.am_create_time)
								}
								return item
							})
							
						}
						
					} else {

					}
				})
			},
			add() {
				uni.navigateTo({
					url: '../list/dialogueList'
				})
			},
			send() {
				if (!this.msg) {
					uni.showToast({
						title: '输入内容不能为空',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: 'Loading'
				})
				const params = {
					map: 'applet_member_chat',
					type: '1',
					msg: this.msg
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						this.init()
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input {
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		padding-top: 30rpx;
		padding-bottom: 120rpx;
		position: relative;
		background-color: #F4F5F6;
	}

	.advices {
		width: 690rpx;
		margin: 0 auto;
		padding: 29rpx 25rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.14);
		border-radius: 15rpx;
	}

	.advices-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 36rpx;
	}

	.advices-text {
		margin-top: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
		line-height: 30rpx;
	}

	.message {
		padding: 41rpx 27rpx;
	}

	.message-tt {
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
		line-height: 36rpx;
	}

	.message-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 41rpx;
	}

	.message-list .image {
		width: 101rpx;
		height: 97rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #007AFF;
	}

	.message-list .text {
		max-width: 450rpx;
		background: #FFFFFF;
		border-radius: 39px;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		position: relative;
	}

	.message-list text::after {
		content: '';
		width: 35rpx;
		height: 35rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 15rpx;
	}

	.message-list2 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 41rpx;
	}

	.message-list2 .image {
		width: 101rpx;
		height: 97rpx;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.message-list2 .text {
		max-width: 450rpx;
		background-color: #45C9FF;
		border-radius: 100rpx;
		padding: 10rpx 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	// .message-list2 text::after {
	// 	content: '';
	// 	width: 35rpx;
	// 	height: 35rpx;
	// 	background-color: #45C9FF;
	// 	position: absolute;
	// 	top: 0;
	// 	right: 15rpx;
	// }

	.dialogBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding: 28rpx 24rpx 8rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.dialogBox image {
		width: 43rpx;
		height: 37rpx;
	}

	.dialogBox input {
		width: 471rpx;
		height: 87rpx;
		padding: 10rpx 43rpx;
		background: #F4F5F6;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #909090;
		line-height: 42rpx;
	}

	.dialogBox text {
		width: 139rpx;
		height: 87rpx;
		color: #FFFFFF;
		background-color: #3CC9FE;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42rpx;
	}
</style>
